<template>
  <div class="dialog-form page">
    <div class="base-container">
      <p class="title">用户信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="用户编号：">{{ form.platformUserId }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名：">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号码：">{{ form.mobile }}</el-descriptions-item>
        <el-descriptions-item label="电子卡号：">{{ form.cardNo }}</el-descriptions-item>
        <el-descriptions-item label="用户状态：">
          <div style="display: inline-block">
            <dict-tag :options="plat_user_status" :value="form.userStatus"/>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="base-container mt-10px">
      <p class="title">订单来源</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="所属机构：">
          <div style="display: inline-block">
            <dict-tag :options="order_org_id" :value="form.orgId"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="所属公司：">{{ form.companyName }}</el-descriptions-item>
        <el-descriptions-item label="所属分公司：">{{ form.subCompanyName }}</el-descriptions-item>
        <el-descriptions-item label="所属线路：">{{ form.lineName }}</el-descriptions-item>
        <el-descriptions-item label="车牌号：">{{ form.plateNum }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="base-container mt-10px">
      <p class="title">订单信息</p>
      <el-descriptions class="descriptions">
        <el-descriptions-item label="渠道：">{{ form.channelName }}</el-descriptions-item>
        <el-descriptions-item label="支付模式：">
          <div style="display: inline-block">
            <dict-tag :options="plat_order_pay_mode" :value="form.payMode"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="支付方式：">
          <div style="display: inline-block">
            <dict-tag :options="plat_order_pay_channel" :value="form.payChannel"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="票价：">{{ formatAmount(form.payFee) }}元</el-descriptions-item>
        <el-descriptions-item label="优惠金额：">{{ formatAmount(form.couponFee) }}元</el-descriptions-item>
        <el-descriptions-item label="实扣金额：">{{ form.extTen == 1 || form.extTen == 3 ? '' : formatAmount(form.actualFee) }}元</el-descriptions-item>
        <el-descriptions-item label="订单状态：">
          <div style="display: inline-block">
            <dict-tag :options="ride_order_status" :value="form.extTen"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="商户订单号：">{{ form.platOrderNo }}</el-descriptions-item>
        <el-descriptions-item label="扫码时间：">{{ parseTime(form.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <el-descriptions-item label="扣款时间：">{{ parseTime(form.payTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
        <!-- 0-待对账;1-已对账;2-对账失败 -->
        <el-descriptions-item v-if="form.ext_four == 1" label="对账日期：">{{ parseTime(form.extFive, '{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item v-if="form.extTen == 3" label="失败原因：">{{ form.exDetail }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="onCancel">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { getPlatOrderPre } from '@/api/order/ride'
import { nextTick } from 'vue'
const { proxy } = getCurrentInstance()
const { plat_order_pay_mode, plat_user_status, order_org_id, plat_order_pay_channel, ride_order_status } = proxy.useDict('plat_order_pay_mode', 'plat_user_status', 'order_org_id', 'plat_order_pay_channel', 'ride_order_status')

const emits = defineEmits(['cancel'])

const applyRefund = ref()
const form = ref({})

const pageInit = (id) => {
  getDetail(id)
}

const getDetail = (id) => {
  getPlatOrderPre(id).then(res => {
    if (res.code == 200) {
      form.value = res.data
    }
  })
}

const onCancel = () => {
  emits('cancel')
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.page {
  background-color: $main-bg-color;
  margin: -20px -16px;
  padding: 10px 10px 0;
}

.title {
  color: rgb(31, 31, 31);
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgb(225, 225, 225);
}

.descriptions {
  :deep(.el-descriptions__cell) {
    width: 33.33%
  }

  :deep(.el-descriptions__content) {
    word-break: break-all;
  }
}

.dialog-footer {
  margin-left: -10px;
  margin-right: -10px;
  background-color: #fff;
}
</style>